part of 'page.dart';

class _WebPurchaseItemPageView extends StatelessWidget {
  const _WebPurchaseItemPageView({
    required _WebPurchaseItemPageWloc wloc,
  }) : _wloc = wloc;

  final _WebPurchaseItemPageWloc _wloc;

  Widget _buildContent({
    required _WebPurchaseItemPageWlocState state,
    required BoxConstraints constraints,
    required BuildContext context,
  }) {
    if (state is _InitialWebPurchaseItemPageWlocState) {
      return _buildInitialStateContent(
        state: state,
        constraints: constraints,
        context: context,
      );
    }

    if (state is _LoadingWebPurchaseItemPageWlocState) {
      return _buildLoadingStateContent(
        state: state,
        constraints: constraints,
        context: context,
      );
    }

    if (state is _LoadedWebPurchaseItemPageWlocState) {
      return _buildLoadedStateContent(
        state: state,
        constraints: constraints,
        context: context,
      );
    }

    throw UnimplementedError();
  }

  Widget _buildInitialStateContent({
    required _InitialWebPurchaseItemPageWlocState state,
    required BoxConstraints constraints,
    required BuildContext context,
  }) {
    return Column(
      children: [
        _buildHeader(
          state: state,
          constraints: constraints,
          context: context,
        ),
        const Spacer(),
        const AppFooter(),
      ],
    );
  }

  Widget _buildLoadingStateContent({
    required _LoadingWebPurchaseItemPageWlocState state,
    required BoxConstraints constraints,
    required BuildContext context,
  }) {
    return Stack(
      fit: StackFit.expand,
      children: [
        Column(
          children: [
            _buildHeader(
              state: state,
              constraints: constraints,
              context: context,
            ),
            const Spacer(),
            const AppFooter(),
          ],
        ),
        const DelayedWidget(
          delay: Duration(milliseconds: 500),
          child: Center(
            child: AppLoader(),
          ),
        ),
      ],
    );
  }

  Widget _buildLoadedStateContent({
    required _LoadedWebPurchaseItemPageWlocState state,
    required BoxConstraints constraints,
    required BuildContext context,
  }) {
    final contentWidgets = [
      _buildPurchaseItemBlock(
        state: state,
        context: context,
      ),
      const SizedBox(
        height: 24,
      ),
      _buildPurchaseRequestButton(
        state: state,
        context: context,
      ),
    ];

    String? errorText;

    if (state.orderPlacingFailure != null) {
      final failure = state.orderPlacingFailure!;

      if (failure is ServerOrderPlacingFailure) {
        errorText = WebPurchaseItemPageTranslation.of(context).serverFailureText;
      } else if (failure is NetworkOrderPlacingFailure) {
        errorText = WebPurchaseItemPageTranslation.of(context).networkFailureText;
      }
    }

    if (errorText != null) {
      final errorWidget = ConstrainedBox(
        constraints: const BoxConstraints(
          maxWidth: 300,
        ),
        child: Text(
          errorText,
          style: WebPurchaseItemPageTheme.of(context).textTheme.error,
          textAlign: TextAlign.center,
        ),
      );

      contentWidgets.addAll([
        const SizedBox(
          height: 12,
        ),
        Padding(
          padding: const EdgeInsets.symmetric(
            horizontal: 16,
          ),
          child: errorWidget,
        ),
      ]);
    }

    contentWidgets.addAll([
      const SizedBox(
        height: 40,
      ),
      _buildPremiumFeatures(
        context: context,
      ),
      const SizedBox(
        height: 32,
      ),
    ]);

    return Column(
      children: [
        _buildHeader(
          state: state,
          constraints: constraints,
          context: context,
        ),
        Expanded(
          child: Scrollbar(
            child: CustomScrollView(
              primary: true,
              slivers: [
                SliverList(
                  delegate: SliverChildListDelegate(contentWidgets),
                ),
                const SliverFillRemaining(
                  hasScrollBody: false,
                  child: Column(
                    children: [
                      Spacer(),
                      AppFooter(),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildHeader({
    required _WebPurchaseItemPageWlocState state,
    required BoxConstraints constraints,
    required BuildContext context,
  }) {
    final maxWidth = constraints.maxWidth;

    if (maxWidth < kRegularHeaderMinWidth) {
      return _buildCompactHeader(
        state: state,
        context: context,
      );
    }

    return _buildRegularHeader(
      state: state,
      context: context,
    );
  }

  Widget _buildRegularHeader({
    required _WebPurchaseItemPageWlocState state,
    required BuildContext context,
  }) {
    final List<Widget> trailingWidgets;

    if (state.user == null) {
      trailingWidgets = [
        HeaderAngryWordsProRegularButton(
          onPressed: _wloc.onHeaderAngryWordsProButtonPressed,
        ),
        const SizedBox(
          width: 28,
        ),
        const HeaderDivider(),
        const SizedBox(
          width: 12,
        ),
        HeaderSigningInButton(
          onPressed: _wloc.onHeaderSigningInButtonPressed,
        ),
        const SizedBox(
          width: 4,
        ),
        HeaderSigningUpButton(
          onPressed: _wloc.onHeaderSigningUpButtonPressed,
        ),
        const SizedBox(
          width: 24,
        ),
      ];
    } else {
      trailingWidgets = [
        HeaderAngryWordsProRegularButton(
          onPressed: _wloc.onHeaderAngryWordsProButtonPressed,
        ),
        const SizedBox(
          width: 16,
        ),
        HeaderUserButton(
          iconSize: 35,
          onAccountTilePressed: _wloc.onHeaderUserActionDialogAccountTilePressed,
          onSigningOutTilePressed: _wloc.onHeaderUserActionDialogSigningOutTilePressed,
        ),
        const SizedBox(
          width: 16,
        ),
      ];
    }

    return AppHeader(
      height: kRegularHeaderHeight,
      children: [
        const SizedBox(
          width: 8,
        ),
        HeaderLogoButton(
          width: 200,
          onPressed: _wloc.onHeaderLogoButtonPressed,
        ),
        const Spacer(),
        ...trailingWidgets,
      ],
    );
  }

  Widget _buildCompactHeader({
    required _WebPurchaseItemPageWlocState state,
    required BuildContext context,
  }) {
    final List<Widget> trailingWidgets;

    if (state.user == null) {
      trailingWidgets = [
        HeaderAngryWordsProCompactButton(
          onPressed: _wloc.onHeaderAngryWordsProButtonPressed,
        ),
        const SizedBox(
          width: 8,
        ),
        HeaderAuthorizationButton(
          iconSize: 30,
          onSigningInTilePressed: _wloc.onHeaderSigningInButtonPressed,
          onSigningUpTilePressed: _wloc.onHeaderSigningUpButtonPressed,
        ),
        const SizedBox(
          width: 16,
        ),
      ];
    } else {
      trailingWidgets = [
        HeaderAngryWordsProCompactButton(
          onPressed: _wloc.onHeaderAngryWordsProButtonPressed,
        ),
        const SizedBox(
          width: 8,
        ),
        HeaderUserButton(
          iconSize: 30,
          onAccountTilePressed: _wloc.onHeaderUserActionDialogAccountTilePressed,
          onSigningOutTilePressed: _wloc.onHeaderUserActionDialogSigningOutTilePressed,
        ),
        const SizedBox(
          width: 12,
        ),
      ];
    }

    return AppHeader(
      height: kCompactHeaderHeight,
      children: [
        const SizedBox(
          width: 8,
        ),
        HeaderLogoButton(
          width: 200,
          onPressed: _wloc.onHeaderLogoButtonPressed,
        ),
        const Spacer(),
        ...trailingWidgets,
      ],
    );
  }

  Widget _buildPurchaseItemBlock({
    required _LoadedWebPurchaseItemPageWlocState state,
    required BuildContext context,
  }) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final maxWidth = constraints.maxWidth;
        final scaleFactor = min(maxWidth / 410, 1.0);

        final imageHeight = 250 * scaleFactor;
        const imageFloorHeight = 75.0;
        const purchaseItemTileHeight = 130.0;
        const purchaseItemTileFooterHeight = 18.0;
        const imageFloorOverlappingHeight = imageFloorHeight * 0.45;
        const purchaseItemTileFloorOverlappingHeight = imageFloorHeight * 0.4;

        final titleView = Text(
          WebPurchaseItemPageTranslation.of(context).title,
          style: WebPurchaseItemPageTheme.of(context).textTheme.title,
          textAlign: TextAlign.center,
          textScaleFactor: scaleFactor,
        );

        final subtitleView = buildMarkdown(
          markdown: WebPurchaseItemPageTranslation.of(context).subtitleMarkdown,
          textStyle: WebPurchaseItemPageTheme.of(context).textTheme.subtitle,
          textAlign: TextAlign.center,
          textScaleFactor: scaleFactor,
          context: context,
          strongTextStyle: const TextStyle(
            fontWeight: FontWeight.w700,
          ),
        );

        return Stack(
          children: [
            Column(
              children: [
                Container(
                  width: double.infinity,
                  color: WebPurchaseItemPageTheme.of(context).imageBackgroundColor,
                  child: Column(
                    children: [
                      const SizedBox(
                        height: 28,
                      ),
                      Padding(
                        padding: const EdgeInsets.symmetric(
                          horizontal: 40,
                        ),
                        child: ConstrainedBox(
                          constraints: const BoxConstraints(
                            maxWidth: 600,
                          ),
                          child: Column(
                            children: [
                              titleView,
                              SizedBox(
                                height: 12 * scaleFactor,
                              ),
                              subtitleView,
                            ],
                          ),
                        ),
                      ),
                      SizedBox(
                        height: 20 * scaleFactor,
                      ),
                      SizedBox(
                        height: imageHeight + imageFloorHeight / 2 - imageFloorOverlappingHeight,
                      ),
                    ],
                  ),
                ),
                const SizedBox(
                  height: imageFloorHeight / 2 +
                      purchaseItemTileHeight -
                      purchaseItemTileFloorOverlappingHeight +
                      purchaseItemTileFooterHeight,
                ),
              ],
            ),
            Positioned.fill(
              bottom: purchaseItemTileFooterHeight +
                  purchaseItemTileHeight -
                  purchaseItemTileFloorOverlappingHeight,
              child: Align(
                alignment: Alignment.bottomCenter,
                child: _ImageFloor(
                  color: WebPurchaseItemPageTheme.of(context).imageFloorColor,
                  height: imageFloorHeight,
                ),
              ),
            ),
            Positioned.fill(
              bottom: purchaseItemTileFooterHeight +
                  purchaseItemTileHeight -
                  purchaseItemTileFloorOverlappingHeight +
                  imageFloorHeight -
                  imageFloorOverlappingHeight,
              child: Align(
                alignment: Alignment.bottomCenter,
                child: SizedBox(
                  height: imageHeight,
                  child: Image.asset(
                    'assets/web_purchase_item_page_image.webp',
                    height: imageHeight,
                    fit: BoxFit.cover,
                    filterQuality: FilterQuality.high,
                  ),
                ),
              ),
            ),
            Positioned.fill(
              child: Align(
                alignment: Alignment.bottomCenter,
                child: _buildPurchaseItemTiles(
                  tileHeight: purchaseItemTileHeight,
                  tileFooterHeight: purchaseItemTileFooterHeight,
                  state: state,
                  context: context,
                ),
              ),
            ),
          ],
        );
      },
    );
  }

  Widget _buildPurchaseItemTiles({
    required double tileHeight,
    required double tileFooterHeight,
    required _LoadedWebPurchaseItemPageWlocState state,
    required BuildContext context,
  }) {
    return Padding(
      padding: const EdgeInsets.symmetric(
        horizontal: 16,
      ),
      child: ConstrainedBox(
        constraints: const BoxConstraints(
          maxWidth: 400,
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Expanded(
              child: _buildMonthSubscriptionTile(
                tileHeight: tileHeight,
                tileFooterHeight: tileFooterHeight,
                state: state,
                context: context,
              ),
            ),
            const SizedBox(
              width: 8,
            ),
            Expanded(
              child: _buildYearSubscriptionTile(
                tileHeight: tileHeight,
                tileFooterHeight: tileFooterHeight,
                state: state,
                context: context,
              ),
            ),
            const SizedBox(
              width: 8,
            ),
            Expanded(
              child: _buildLifetimePurchaseItemTile(
                tileHeight: tileHeight,
                tileFooterHeight: tileFooterHeight,
                state: state,
                context: context,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildPurchaseItemTile({
    required String duration,
    required String durationLabel,
    required String priceWithCurrency,
    required String? monthlyPriceLabel,
    required bool selected,
    required bool showPopularityBadge,
    required double effectiveHeight,
    required double effectiveFooterHeight,
    required VoidCallback onTap,
    required BuildContext context,
  }) {
    const popularityBadgeHeight = 20.0;

    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        MouseRegion(
          cursor: SystemMouseCursors.click,
          child: GestureDetector(
            onTap: onTap,
            child: Stack(
              children: [
                Padding(
                  padding: const EdgeInsets.only(
                    top: popularityBadgeHeight / 2,
                  ),
                  child: Container(
                    height: effectiveHeight,
                    width: double.infinity,
                    decoration: BoxDecoration(
                      color: WebPurchaseItemPageTheme.of(context).purchaseItemTileColor,
                      border: Border.all(
                        color: selected
                            ? CoreTheme.of(context).primaryColor
                            : WebPurchaseItemPageTheme.of(context).purchaseItemTileColor,
                        width: 3,
                      ),
                      borderRadius: BorderRadius.circular(12),
                      boxShadow: WebPurchaseItemPageTheme.of(context).purchaseItemTileShadows,
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          duration,
                          style: WebPurchaseItemPageTheme.of(context)
                              .textTheme
                              .purchaseItemTileDuration,
                        ),
                        Text(
                          durationLabel,
                          style: WebPurchaseItemPageTheme.of(context)
                              .textTheme
                              .purchaseItemTileDurationLabel,
                        ),
                        const SizedBox(
                          height: 12,
                        ),
                        Text(
                          priceWithCurrency,
                          style:
                              WebPurchaseItemPageTheme.of(context).textTheme.purchaseItemTilePrice,
                        ),
                        const SizedBox(
                          height: 14,
                        ),
                      ],
                    ),
                  ),
                ),
                if (showPopularityBadge)
                  Positioned.fill(
                    child: Align(
                      alignment: Alignment.topCenter,
                      child: Container(
                        height: popularityBadgeHeight,
                        decoration: BoxDecoration(
                            color: CoreTheme.of(context).primaryColor,
                            borderRadius: BorderRadius.circular(popularityBadgeHeight / 2)),
                        child: Padding(
                          padding: const EdgeInsets.symmetric(
                            horizontal: 8,
                          ),
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Text(
                                WebPurchaseItemPageTranslation.of(context)
                                    .purchaseItemTileYearSubscriptionBadge,
                                style: WebPurchaseItemPageTheme.of(context)
                                    .textTheme
                                    .yearPurchaseItemTileBadge,
                                textAlign: TextAlign.center,
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                                textWidthBasis: TextWidthBasis.longestLine,
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
              ],
            ),
          ),
        ),
        SizedBox(
          height: effectiveFooterHeight,
          child: monthlyPriceLabel == null
              ? null
              : Align(
                  alignment: Alignment.bottomCenter,
                  child: Text(
                    monthlyPriceLabel,
                    style:
                        WebPurchaseItemPageTheme.of(context).textTheme.purchaseItemTileMonthlyPrice,
                    textAlign: TextAlign.center,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
        ),
      ],
    );
  }

  Widget _buildMonthSubscriptionTile({
    required double tileHeight,
    required double tileFooterHeight,
    required _LoadedWebPurchaseItemPageWlocState state,
    required BuildContext context,
  }) {
    final monthSubscriptionModel = state.monthSubscriptionModel;
    const months = 1;
    final durationLabel =
        WebPurchaseItemPageTranslation.of(context).getPurchaseItemTileSubscriptionDurationLabel(
      months: months,
    );

    final priceWithCurrency =
        WebPurchaseItemPageTranslation.of(context).buildPurchaseItemPriceWithCurrency(
      price: monthSubscriptionModel.prettifiedPrice,
      currency: monthSubscriptionModel.currency,
    );

    final selected = state.selectedPurchaseItemSku == monthSubscriptionModel.sku;

    return _buildPurchaseItemTile(
      effectiveHeight: tileHeight,
      effectiveFooterHeight: tileFooterHeight,
      duration: '$months',
      durationLabel: durationLabel,
      priceWithCurrency: priceWithCurrency,
      monthlyPriceLabel: null,
      selected: selected,
      showPopularityBadge: false,
      onTap: () {
        _wloc.onPurchaseItemTilePressed(
          purchaseItemSku: monthSubscriptionModel.sku,
        );
      },
      context: context,
    );
  }

  Widget _buildYearSubscriptionTile({
    required double tileHeight,
    required double tileFooterHeight,
    required _LoadedWebPurchaseItemPageWlocState state,
    required BuildContext context,
  }) {
    final yearSubscriptionModel = state.yearSubscriptionModel;

    const months = 12;
    final durationLabel =
        WebPurchaseItemPageTranslation.of(context).getPurchaseItemTileSubscriptionDurationLabel(
      months: months,
    );

    final priceWithCurrency =
        WebPurchaseItemPageTranslation.of(context).buildPurchaseItemPriceWithCurrency(
      price: yearSubscriptionModel.prettifiedPrice,
      currency: yearSubscriptionModel.currency,
    );

    final selected = state.selectedPurchaseItemSku == yearSubscriptionModel.sku;

    final monthlyPriceWithCurrency =
        WebPurchaseItemPageTranslation.of(context).buildPurchaseItemPriceWithCurrency(
      price: yearSubscriptionModel.prettifiedMonthlyPrice,
      currency: yearSubscriptionModel.currency,
    );

    final monthlyPriceLabel = WebPurchaseItemPageTranslation.of(context).buildMonthlyPriceLabel(
      monthlyPriceWithCurrency: monthlyPriceWithCurrency,
    );

    return _buildPurchaseItemTile(
      effectiveHeight: tileHeight,
      effectiveFooterHeight: tileFooterHeight,
      duration: '$months',
      durationLabel: durationLabel,
      priceWithCurrency: priceWithCurrency,
      monthlyPriceLabel: monthlyPriceLabel,
      selected: selected,
      showPopularityBadge: true,
      onTap: () {
        _wloc.onPurchaseItemTilePressed(
          purchaseItemSku: yearSubscriptionModel.sku,
        );
      },
      context: context,
    );
  }

  Widget _buildLifetimePurchaseItemTile({
    required double tileHeight,
    required double tileFooterHeight,
    required _LoadedWebPurchaseItemPageWlocState state,
    required BuildContext context,
  }) {
    final lifetimePurchaseItemModel = state.lifetimePurchaseItemModel;

    const duration = '\u221e';
    final durationLabel =
        WebPurchaseItemPageTranslation.of(context).purchaseItemTileLifetimeProductDurationLabel;

    final priceWithCurrency =
        WebPurchaseItemPageTranslation.of(context).buildPurchaseItemPriceWithCurrency(
      price: lifetimePurchaseItemModel.prettifiedPrice,
      currency: lifetimePurchaseItemModel.currency,
    );

    final selected = state.selectedPurchaseItemSku == lifetimePurchaseItemModel.sku;

    return _buildPurchaseItemTile(
      effectiveHeight: tileHeight,
      effectiveFooterHeight: tileFooterHeight,
      duration: duration,
      durationLabel: durationLabel,
      priceWithCurrency: priceWithCurrency,
      monthlyPriceLabel: null,
      selected: selected,
      showPopularityBadge: false,
      onTap: () {
        _wloc.onPurchaseItemTilePressed(
          purchaseItemSku: lifetimePurchaseItemModel.sku,
        );
      },
      context: context,
    );
  }

  Widget _buildPurchaseRequestButton({
    required _LoadedWebPurchaseItemPageWlocState state,
    required BuildContext context,
  }) {
    VoidCallback? onPressed;

    if (!state.purchaseRequestInProgress) {
      onPressed = _wloc.requestPurchase;
    }

    return Align(
      alignment: Alignment.center,
      child: Padding(
        padding: const EdgeInsets.symmetric(
          horizontal: 16,
        ),
        child: ConstrainedBox(
          constraints: const BoxConstraints(
            maxWidth: 300,
          ),
          child: AppButton(
            color: CoreTheme.of(context).primaryColor,
            disabledColor: CoreTheme.of(context).primaryColor,
            pressedOpacity: 0.6,
            onPressed: onPressed,
            borderRadius: BorderRadius.circular(10),
            child: SizedBox(
              width: double.infinity,
              height: 50,
              child: Center(
                child: Text(
                  WebPurchaseItemPageTranslation.of(context).purchaseRequestButtonTitle,
                  style:
                      WebPurchaseItemPageTheme.of(context).textTheme.purchaseRequestButton,
                  textAlign: TextAlign.center,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildPremiumFeatures({
    required BuildContext context,
  }) {
    return Align(
      alignment: Alignment.center,
      child: Padding(
        padding: const EdgeInsets.symmetric(
          horizontal: 20,
        ),
        child: ConstrainedBox(
          constraints: const BoxConstraints(
            maxWidth: 1200,
          ),
          child: LayoutBuilder(
            builder: (context, constraints) {
              final maxWidth = constraints.maxWidth;

              const featureHorizontalGapWidth = 30.0;
              const preferableFeatureWidth = 350.0;

              var lineFeatureCount = 1;

              for (var i = 2;; i++) {
                if (i * preferableFeatureWidth + (i - 1) * featureHorizontalGapWidth - 0.01 <=
                    maxWidth) {
                  lineFeatureCount = i;
                } else {
                  break;
                }
              }

              final featureWidth = (maxWidth - (lineFeatureCount - 1) * featureHorizontalGapWidth) /
                      lineFeatureCount -
                  0.01;

              const iconSize = 30.0;

              final featureBlocks = [
                _PremiumFeatureBlock(
                  width: featureWidth,
                  title: WebPurchaseItemPageTranslation.of(context).dailyUnlimitPremiumFeatureTitle,
                  subtitle:
                      WebPurchaseItemPageTranslation.of(context).dailyUnlimitPremiumFeatureSubtitle,
                  icon: Icon(
                    CupertinoIcons.infinite,
                    size: iconSize,
                    color: CoreTheme.of(context).primaryColor,
                  ),
                ),
                _PremiumFeatureBlock(
                  width: featureWidth,
                  title: WebPurchaseItemPageTranslation.of(context)
                      .exerciseShufflingPremiumFeatureTitle,
                  subtitle: WebPurchaseItemPageTranslation.of(context)
                      .exerciseShufflingPremiumFeatureSubtitle,
                  icon: Icon(
                    CupertinoIcons.shuffle,
                    size: iconSize * 0.9,
                    color: CoreTheme.of(context).primaryColor,
                  ),
                ),
                _PremiumFeatureBlock(
                  width: featureWidth,
                  title: WebPurchaseItemPageTranslation.of(context)
                      .allLearningContentPremiumFeatureTitle,
                  subtitle: WebPurchaseItemPageTranslation.of(context)
                      .allLearningContentPremiumFeatureSubtitle,
                  icon: Icon(
                    CupertinoIcons.plus_app,
                    size: iconSize,
                    color: CoreTheme.of(context).primaryColor,
                  ),
                ),
                _PremiumFeatureBlock(
                  width: featureWidth,
                  title: WebPurchaseItemPageTranslation.of(context).imagePremiumFeatureTitle,
                  subtitle: WebPurchaseItemPageTranslation.of(context).imagePremiumFeatureSubtitle,
                  icon: Icon(
                    CupertinoIcons.photo,
                    size: iconSize * 0.9,
                    color: CoreTheme.of(context).primaryColor,
                  ),
                ),
                _PremiumFeatureBlock(
                  width: featureWidth,
                  title: WebPurchaseItemPageTranslation.of(context)
                      .themeCustomizationPremiumFeatureTitle,
                  subtitle: WebPurchaseItemPageTranslation.of(context)
                      .themeCustomizationPremiumFeatureSubtitle,
                  icon: Icon(
                    CupertinoIcons.paintbrush,
                    size: iconSize,
                    color: CoreTheme.of(context).primaryColor,
                  ),
                ),
              ];

              final lineCount = (featureBlocks.length / lineFeatureCount).ceil();

              var widgetIndex = 0;

              final widgets = <Widget>[];

              const featureHorizontalGap = SizedBox(
                width: featureHorizontalGapWidth,
              );

              const featureVerticalGap = SizedBox(
                height: 25,
              );

              for (var i = 0; i < lineCount; i++) {
                if (i > 0) {
                  widgets.add(featureVerticalGap);
                }

                final widgetLine = <Widget>[];
                final row = Row(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: widgetLine,
                );

                widgets.add(row);

                for (var j = 0; j < lineFeatureCount; j++) {
                  if (j > 0) {
                    widgetLine.add(featureHorizontalGap);
                  }

                  widgetLine.add(Flexible(
                    child: featureBlocks[widgetIndex],
                  ));
                  widgetIndex++;

                  if (widgetIndex >= featureBlocks.length) {
                    break;
                  }
                }
              }

              return ConstrainedBox(
                constraints: BoxConstraints(
                  maxWidth:
                      lineFeatureCount * 500 + (lineFeatureCount - 1) * featureHorizontalGapWidth,
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: widgets,
                ),
              );
            },
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: double.infinity,
      width: double.infinity,
      color: CoreTheme.of(context).backgroundColor,
      child: LayoutBuilder(
        builder: (context, constraints) {
          return WlocBuilder<_WebPurchaseItemPageWloc, _WebPurchaseItemPageWlocState>(
            wloc: _wloc,
            builder: (context, state) {
              return _buildContent(
                state: state,
                constraints: constraints,
                context: context,
              );
            },
          );
        },
      ),
    );
  }
}
